<template>
	<view class="goods-list">
		<view class="goods-list-left">
			<label v-if="item.goods_exist" class="radio">
				<radio :checked='item.goods_state' color="#c00000" @click="radioClickHandler"/>
			</label>
			<image class="goods-list-img"  :src="item.goods_big_logo || item.goods_small_logo || defaultPic"   mode="widthFix"></image>
		</view>
		<view class="goods-list-right">
			<view class="right-title-long" v-if="item.goods_name.length > 20">
				{{item.goods_name}}
			</view>
			<view class="right-title-short" v-else>
				{{item.goods_name}}
		
			</view>
			
			<view class="right-price-box">
				<view class="right-price" v-if="item.goods_count > 1">
					¥:{{item.goods_price * item.goods_count | tofixed}}
				</view>
				<view class="right-price" v-else>
					¥:{{item.goods_price | tofixed}}
				</view>
				<view class="right-count" v-if="item.goods_exist">
					<uni-number-box :min="1" :value="item.goods_count" @change="numChangeHandler"></uni-number-box>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
	export default {
		name:"my-goods",
		props:{
			item:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				defaultPic:'../../static/logo.png',
				isFlag: false
	
			};
		},
		methods:{
			radioClickHandler() {
			    // 通过 this.$emit() 触发外界通过 @ 绑定的 radio-change 事件，
			    this.$emit('radio-change', {
	
			      goods_id: this.item.goods_id,
			      goods_state: !this.item.goods_state
			    })
			  },
			numChangeHandler(val){
				this.$emit('num-change', {
					goods_id: this.item.goods_id,
					goods_count: +val
				})
				
			}
		},
		filters:{
			tofixed(num){
				return Number(num).toFixed(2)
			}
		}
	}
</script>

<style lang="scss">
	
	.goods-list {
		display: flex;
		border-bottom: 1px solid #efefef;
		justify-content: center;
		.goods-list-left {
			display: flex;
			justify-content: center;
			align-items: center;
			flex:1;
			radio{
				padding: 0rpx 20rpx;
			}
			.goods-list-img {
				width: 100px;
				height: 100px;
			}
		}
		.goods-list-right {
			flex:2;
			font-size: 12px;
			.right-price-box {
				
				display: flex;
				justify-content: space-between;
				padding: 0rpx 20rpx;
				.right-price {	
					padding: 20rpx;
					margin-top: 20rpx;
					color:red
				}
				.right-count {
					padding: 20rpx;
					margin-top: 10rpx;
					
				}
			}
			
			.right-title-long {
		
				padding: 20rpx;
			}
			.right-title-short {
				padding: 20rpx;
				padding-top: 40rpx;
			}
		}
	}
	
</style>